<template>
	<view class="body">
		<!-- 导航栏 -->
		<view class="nav">
			<view class="list" v-bind:class="{toogle:isActive}" @click="toogle()" >
				<view class="nav-list">活动列表</view>
			</view>
			<view class="participate" v-bind:class="{toogle:!isActive}" @click="toogle()">
				<view class="nav-list">我要参与</view>
			</view>
		</view>
		<!-- 第1个活动 -->
		<view class="row" v-for="(item,index) in objectArray" :key="item.id" @click="apply(item.id)">
			<!-- 活动标题 -->
			<view class="header">
				{{item.title}}
			</view>
			<!-- 活动图 -->
			<view class="diagram">
				<image class="active_diagram" :src="item.img"></image>
			</view>
			<!-- 报名好处 -->
			<view class="apply_bg">
				<view class="apply">报名可享</view>
				<view class="description">{{item.text}}</view>
				<!-- 1 -->
				<view class="timing_l" v-if="objectArray[item.id]['start']">
					<text>剩</text>
					<text class="remaining">{{item.days}}</text>
					<text>天</text>
				</view>
				<!-- 2 -->
				<view class="timing_l" v-if="objectArray[item.id]['hour']">
					<text>剩</text>
					<text class="remaining">{{item.hours}}</text>
					<text>时</text>
					<text class="remaining">{{item.minutes}}</text>
					<text>分</text>
				</view>
				<!-- 3 -->
				<view class="timing_l" v-if="objectArray[item.id]['amid']">
					<text>剩</text>
					<text class="remaining">{{item.minutes}}</text>
					<text>分</text>
					<text class="remaining">{{item.seconds}}</text>
					<text>秒</text>
				</view>
				<!-- 4 -->
				<view class="timing_l" v-if="objectArray[item.id]['out']">
					<text>活动已结束</text>
				</view>
			</view>
			<!-- 报名人数 -->
			<view class="give_money">
				<view class="partake">
					<text class="price">￥{{item.money}}</text>
					<text class="number">已报名{{item.people}}人</text>
				</view>
				<view class="apply_btn" v-if="objectArray[item.id]['btn']">{{item.button}}</view>
				<view class="ban_btn" v-if="!objectArray[item.id]['btn']">{{item.cutoff}}</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	var countDownDate1=new Date("2019-09-26 20:50:00").getTime();
	var countDownDate2=new Date("2019-09-26 18:41:00").getTime();
	export default {
		data() {
			return {
			objectArray:[{
				id:0,
				countDownDate:countDownDate1,
				title:'我是活动名字来来来分是奥恩啊瓦fewl的二十一',
				img:'../../static/huodongliebiao/activity_diagram.png',
				text:'我是活动报名的好处，报名即可获得优惠券500元啥的总共不超30字',
				start:false,
				hour:false,
				amid:false,
				out:true,
				btn:true,
				days:'00',
				hours:'00',
				minutes:'00',
				seconds:'00',
				money:'99.00',
				people:'98',
				button:'立即报名',
				cutoff:'报名截止',
				crowdfunding:'参与众筹'
			},{
				id:1,
				countDownDate:countDownDate2,
				title:'我是活动名字来来来分是奥恩啊瓦fewl的二十二',
				img:'../../static/huodongliebiao/activity_diagram.png',
				text:'我是活动报名的好处，报名即可获得优惠券500元啥的总共不超30字',
				start:false,
				hour:false,
				amid:false,
				out:true,
				btn:true,
				days:'00',
				hours:'00',
				minutes:'00',
				seconds:'00',
				money:'99.00',
				people:'98',
				button:'立即报名',
				cutoff:'报名截止',
				crowdfunding:'参与众筹',
			}],
			isActive:true,
			}
		},
		onLoad() {
			
		},
		onShow() {
			//数组
			let arr = [1,2];
			uni.request({
				url:'http://hmc.zanboon.com/login/login/token',
				data:{},
				success:(res) =>{
					var token = res.data.token;
					console.log(token,'token');
					uni.request({
						url:'http://hmc.zanboon.com/hmc/mobile_terminal/mobile_select',
						data:{
							token:token,
						},
						success:(res) =>{
							console.log(res);
							//var arr = res.data.token;
						}
						
					});
				}
			});
			
			for(var k in arr ){
				this.timel(arr,k);
			}
		},
		methods: {
			toogle:function(){
				this.isActive=!this.isActive;
				uni.navigateTo({
					url: '../../pages/woyaocanyu/woyaocanyu'
				});
			},
			timel(arr,k){
				let that=this;
				//that.objectArray[k]['start']=false;
				console.log(that.objectArray[k]['start'],'333333333');
				//设置倒计时的日期
				//var countDownDate=new Date("2019-09-26 18:34:00").getTime();
				var countDownDate = that.objectArray[k]['countDownDate'];
				//每1秒钟更新一次计数
				var x = setInterval(function(){
					//获取今天的日期和时间
					var now = new Date().getTime();
					//找到现在和倒计时日期之间的距离
					var distance = countDownDate-now;
					//时间计算的天，小时，分钟和秒
					var days = Math.floor(distance / (1000 * 60 * 60 * 24));
					var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
					var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
					var seconds = Math.floor((distance % (1000 * 60)) / 1000);
					that.objectArray[k]['hours'] = hours;
					that.objectArray[k]['days']=days;
					that.objectArray[k]['minutes']=minutes;
					that.objectArray[k]['seconds']=seconds;
					console.log(days + '天' + hours + '时' + minutes + '分' + seconds + '秒');
					if(distance<=0){
						that.objectArray[k]['start']=false;
						that.objectArray[k]['hour']=false;
						that.objectArray[k]['amid'] = false;
						that.objectArray[k]['out']=true;
						that.objectArray[k]['btn']=false;
						console.log('活动结束');
						clearTimeout(x);
					}else if(days > 1){
						that.objectArray[k]['start']=true;
						that.objectArray[k]['hour']=false;
						that.objectArray[k]['amid'] = false;
						that.objectArray[k]['out']=false;
						console.log('1天以上');
					}else if(hours >= 1 && days <= 0){
						that.objectArray[k]['start']=false;
						that.objectArray[k]['hour']=true;
						that.objectArray[k]['amid'] = false;
						that.objectArray[k]['out']=false;
						console.log('1小时以上，一天以下');
					}else if(hours <= 0){
						that.objectArray[k]['start']=false;
						that.objectArray[k]['hour']=false;
						that.objectArray[k]['amid'] = true;
						that.objectArray[k]['out']=false;
						console.log('一小时以内');
					}
				},1000);
			},
			apply:function(e){
				let that=this;
				//在起始页面跳转到test.vue页面并传递参数
				console.log(e,'@click="apply()"');
				uni.navigateTo({
					url: '../../pages/huodongxiangqing/huodongxiangqing?id='+e,
				});
			}
		}
	}
</script>

<style>
	* body{
		height: 100%;
		background: #F3F2F7;
	}
	.body{
		height: 100%;
		background: #F3F2F7;
	}
	.nav{
		display: -webkit-flex;
		display: flex;
		-webkit-justify-content: center;
		justify-content: center;
		height: 88upx;
		border-bottom:1upx solid #CCCCCC;
		font-size:28upx;
		background-color: #FFFFFF;
	}
	.list{
		height: 84upx;
		width: 160upx;
		background: #FFFFFF;
		color: #666666;
		margin-right:64upx;
	}
	.participate{
		background: #FFFFFF;
		height: 84upx;
		width: 160upx;
        color: #666666;
		margin-left:64upx;
	}
	.toogle{
		color:#D53D34;
		border-bottom:6upx solid #D53D34;	
	}
	.nav-list{
		padding:22upx 22upx 20upx 22upx;
		font-size:28upx;
	}
	.row{
		/* height: 694upx; */
		/* width: 750upx; */
		background: #FFFFFF;
		margin-bottom: 30upx;
	}
	.header{
		font-size: 32upx;
		padding:24upx 30upx 16upx 30upx ;
	}
	.diagram{
		height: 408upx;
		width: 750upx;
		padding-top: 10upx;
	}
	.active_diagram{
		height: 100%;
		width: 750upx;
	}
	.apply_bg{
		display: flex;
		align-items: center;
		height: 90upx;
		width: 750upx;
		background-image: url('~@/static/huodongliebiao/benefit.png');
		background-size:100% 100%;
		background-repeat:no-repeat;
	}
	.apply{
		width: 56upx;
		font-size: 28upx;
		margin-left:30upx;
		margin-right: 26upx;
		color: #FFFFFF;
		font-weight: bold;
	}
	.description{
	    width: 380upx;
	    font-size: 24upx;
	    color: #FFFFFF;
		/* margin-left:26upx; */
	}
	.timing_l{
		display: flex;
		align-items: center;
		align-content: ;
		margin-left: auto;
		margin-right: 30upx;
		color: #FFFFFF;
		font-size: 24upx;
		/* border: 1upx solid #4CD964; */
	}
	.remaining{
		font-size: 40upx;
	    background-color: #FFFFFF;
		border-radius:4upx;
		color: #FF615D;
		padding: 0upx 6upx;
		margin: 0upx 8upx;
		
	}
	.give_money{
		display: flex;
		height: 130upx;
		/* border: 1upx solid #4CD964; */
	}
	.partake{
		display: flex;
		flex-direction: column;
		justify-content: center;
		text-align: left;
		height: 130upx;
		margin-left: 30upx;
		/* border: 1upx solid #007AFF; */
	}
	.price{
		position: relative;
		color: #FE0400;
		font-size: 40upx;
		left:-10upx;
	}
	.number{
		font-size: 22upx;
		color:#666666;
	}
	.apply_btn{
		height: 54upx;
		width: 166upx;
		margin-left: auto;
		margin-top: 32upx;
		margin-right:30upx;
		padding-top:12upx;
		text-align: center;
		color: #FFFFFF;
		font-size: 30upx;
		background-color: #D53D34;
		border-radius: 4upx;
	}
	.ban_btn{
		height: 54upx;
		width: 166upx;
		margin-left: auto;
		margin-top: 32upx;
		margin-right:30upx;
		padding-top:12upx;
		text-align: center;
		color: #AAAAAA;
		font-size: 30upx;
		background-color: #E8E8E8;
		border-radius: 4upx;
	}
</style>
